<template>
  <el-container>
    <el-header><top-page></top-page></el-header>
    <el-container>
      <aside-page></aside-page>
      <el-container>
        <el-main><router-view></router-view></el-main>
        <el-footer>
          <div class="player">
          <audio :src="musicUrl" controls @music="music()" autoplay>
          </audio>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import TopPage from '@/components/TopPage.vue'
import AsidePage from '@/components/AsidePage.vue'
export default {
  name: 'app',
  components: {
    TopPage,
    AsidePage
  },
  data(){
    return{
      musicUrl: ''
    }
  },
  beforeMount(){
    // 接收 自定义事件传来的数据
    this.$bus.$on('music',data=>{
      console.log('on',data)
      this.musicUrl = data
    })
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}

</style>
<style lang="less" scoped>
.el-header{
  padding: 0 !important;
}
.el-footer{
  width: 100%;
  position: fixed;
  bottom: 0;
}
.el-main{
  padding: 10px 60px;
}
.player{
    audio{
        border-radius: 0;
        margin: 0 auto;
        width: 80%;
    }
    img{
        width: 100%;
    }
}
</style>